<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>房型详情</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        body { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); min-height: 100vh; margin: 0; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }
        .container { max-width: 900px; margin: 60px auto 0; background: #fff; border-radius: 18px; box-shadow: 0 4px 24px #b3a6e6; padding: 36px 36px 48px 36px; }
        .back-btn { background: #f5f5f5; border: none; color: #5a3ec8; padding: 8px 22px; border-radius: 16px; font-size: 16px; cursor: pointer; margin-bottom: 18px; }
        .back-btn:hover { background: #e0e7ff; color: #333; }
        .carousel { width: 100%; aspect-ratio: 16/7; border-radius: 16px; overflow: hidden; margin-bottom: 28px; position: relative; }
        .carousel img { width: 100%; height: 100%; object-fit: cover; display: none; }
        .carousel img.active { display: block; }
        .carousel-dots { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); display: flex; gap: 10px; }
        .carousel-dots span { width: 14px; height: 14px; border-radius: 50%; background: #ddd; cursor: pointer; }
        .carousel-dots .active { background: #5a3ec8; }
        .detail-title { font-size: 32px; font-weight: 700; color: #5a3ec8; margin-bottom: 10px; }
        .detail-desc { color: #888; font-size: 20px; margin-bottom: 16px; }
        .detail-info { font-size: 18px; color: #555; margin-bottom: 8px; }
        .detail-divider { border: none; border-top: 1px solid #eee; margin: 18px 0; }
        .detail-price { color: #f5576c; font-size: 28px; font-weight: bold; margin-bottom: 18px; }
        .detail-facilities { margin-bottom: 18px; }
        .book-btn { background: #5a3ec8; color: #fff; border: none; border-radius: 22px; padding: 16px 54px; font-size: 22px; font-weight: 500; cursor: pointer; transition: background 0.2s; box-shadow: 0 2px 8px #e0d7f7; letter-spacing: 1px; }
        .book-btn:hover { background: #764ba2; }
    </style>
</head>
<body>
    <div class="container">
        <button class="back-btn" onclick="window.history.back()">返回</button>
        <div class="carousel" id="carousel"></div>
        <div class="carousel-dots" id="carouselDots"></div>
        <div class="detail-title" id="typeName"></div>
        <div class="detail-desc" id="description"></div>
        <div class="detail-info" id="bedInfo"></div>
        <div class="detail-info" id="areaInfo"></div>
        <div class="detail-info" id="floorInfo"></div>
        <div class="detail-divider"></div>
        <div class="detail-facilities" id="facilities"></div>
        <div class="detail-price" id="price"></div>
        <button class="book-btn" id="bookBtn">立即预订</button>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
    <script>
        // 获取URL参数
        function getQueryParam(name) {
            const url = window.location.search;
            const reg = new RegExp('[?&]' + name + '=([^&#]*)', 'i');
            const r = url.match(reg);
            return r ? decodeURIComponent(r[1]) : null;
        }
        const typeId = getQueryParam('typeId');
        if (!typeId) {
            $('.container').html('<div style="padding:40px;font-size:22px;color:#f5576c;">未指定房型ID</div>');
        } else {
            $.ajax({
                url: 'http://localhost:8080/api/roomtype/detail?typeId=' + typeId,
                type: 'GET',
                success: function(rt) {
                    // 图片轮播
                    let imgs = [rt.image1, rt.image2, rt.image3].filter(Boolean);
                    if (imgs.length === 0) imgs = ['img/default.jpg'];
                    let carouselHtml = imgs.map((src, i) => `<img src="${src}" class="${i===0?'active':''}">`).join('');
                    $('#carousel').html(carouselHtml);
                    let dotsHtml = imgs.map((_, i) => `<span class="${i===0?'active':''}" data-idx="${i}"></span>`).join('');
                    $('#carouselDots').html(dotsHtml);
                    let idx = 0;
                    $('#carouselDots').on('click', 'span', function() {
                        idx = $(this).data('idx');
                        $('#carousel img').removeClass('active').eq(idx).addClass('active');
                        $('#carouselDots span').removeClass('active').eq(idx).addClass('active');
                    });
                    // 自动轮播
                    setInterval(function() {
                        idx = (idx + 1) % imgs.length;
                        $('#carousel img').removeClass('active').eq(idx).addClass('active');
                        $('#carouselDots span').removeClass('active').eq(idx).addClass('active');
                    }, 3500);

                    // 详情信息
                    $('#typeName').text(rt.typeName || '');
                    $('#description').text(rt.description || '');
                    $('#bedInfo').text('床型：' + (rt.bedType || '') + '，床数：' + (rt.bedCount || ''));
                    $('#areaInfo').text('面积：' + (rt.areaSize || ''));
                    $('#floorInfo').text('楼层：' + (rt.floorInfo || ''));
                    $('#facilities').text('配套设施：' + (rt.facilities || '暂无'));
                    $('#price').text('￥' + (rt.pricePerNight || '--') + ' / 晚');
                    $('#bookBtn').click(function() {
                        window.location.href = 'order.html?typeId=' + typeId;
                    });
                },
                error: function() {
                    $('.container').html('<div style="padding:40px;font-size:22px;color:#f5576c;">获取房型详情失败</div>');
                }
            });
        }
    </script>
</body>
</html> 